<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    /*
    * ajax：async javascript and xml
    *
    * xml：用标签格式做数据状态的存储 数据存储方式
    *   1.非常古老的描述数据的结构
    *   2.用来存储或者传输数据的
    *
    * 前后端分离
    * 接口：api：给前端访问拿数据的地方
    *
    * 现在版本的数据格式：json javascript对象的数据格式 数据结构
    *   json是js对象的严格版本，随便多余或者不符合格式的符号都会出错（属性名必须加""号）
    *
    * ajax：对象，一个可以向后台发送请求的对象
    *
    * JS向后台发起请求
    *
    * XMLHttpRequest 是一个构造函数，这个是JS请求的万物之源
    *
    * 如何发送一个请求：
    * 1.new
    * 2.对ajax对象进行一些初始化设置
    *   2.1请求方法：
    *       当初设计之初的含义：
    *       GET 得到，获得，从服务器拿取数据（也可以发送数据）
    *       POST 发送，发出，将数据发送给服务器（也可以接收数据）
    *
    *       //后续的这些请求都被阻止了
    *       OPTIONS
    *       HEAD
    *       DELETE
    *       FETCH
    *       PUT
    *
    * 地址：服务器能够访问的位置：网址
    *   服务器的真实地址是服务器的ip地址：每个服务器都是唯一的
    *
    *   域名：别名
    *   https://www.baidu.com:8000/image/list
    *   协议名 + 域名 + 端口 + 路由
    *
    *   GET请求发送的数据形式大致如下：
    *   key1=value1&key2=value2...
    *
    *
    * */

    //前后端在数据交互的时候，只有字符串等格式，不允许存对象，不允许存循环引用，即我引用我自己的对象
    let obj = {
        name:"yinshi",
        age:19,
        like:["1","2","3"]
    }

    let jsonStr = JSON.stringify(obj) //将obj对象传入进行转换之后就是json数据格式，将拿到的json用变量jsonStr存储
    let jsonObj = JSON.parse(jsonStr) //这样就能转换成我们熟悉的对象了

    //初始化
    let xhr = new XMLHttpRequest()

    //将对象转换成url中的键值对的形式
    function forMate(obj){
        //下面几行代码是将对象转换成数组形式 用遍历对象的方法
        //let arr = []
        //for(const key in obj){ //key就相当于for循环里面的i
        //    arr.push([key,obj[key]])
        //}
        //上面的代码可以简化成这一行
        let arr = Object.entries(obj)

        arr = arr.map(item => item[0]+"="+item[1])
        return arr.join("&")
    }

    forMate(obj)

    //基础配置
    xhr.open("get","https://www.baidu.com")

    xhr.send(forMate(obj))

    xhr.onreadystatechange = function (){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                console.log(xhr.responseText)
            }
        }
    }

    //但是上述方法还是不够好，我们可以自己封装一个函数
    function request(type,url,data){
        return new Promise(function (resolve){
            let xhr = new XMLHttpRequest()
            xhr.open(type,url)
            xhr.send(forMate(data))
            xhr.onreadystatechange = function (){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                        //console.log(xhr.responseText)
                        resolve(xhr.responseText)
                    }
                }
            }
        })
    }

    request("get",url,obj)
    .then(res => {
        console.log(res)
    })


</script>
</body>
</html>